<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑订单</title>
    <head th:include="include :: header"></head>
    <link type="text/css" rel="stylesheet" th:href="@{/css/style2.css}"/>
</head>
<body>
<div class="main_box">
    <form id="orderItem-edit" display="none">

    </form>
    <div class="cont_box">
        <!--订单号-->
        <div class="user_top">
            订单号：<span id="saleorderno"th:text="${saleOrder.saleorderno}"></span>
            <input type="hidden" id="orderId" th:value="${saleOrder.orderId}">
        </div>
        <div class="user_top">
            会员卡号：<span id="vipId" th:text="${saleOrder.vipId}"></span>
        </div>
        <!--订单商品-->
        <div class="user_top order_top">订单项目：</div>
        <table border="0" cellspacing="0" cellpadding="0" class="table">
            <thead>
            <tr>
                <th>服务项目编号</th>
                <th>服务项目名称</th>
                <th>服务项目价格</th>
                <th>商品实际价格</th>


            </tr>
            </thead>
            <tbody>
            <div></div>
            <tr th:each="item : ${saleOrder.saleOrderItem}">
                <td th:text="${item.serviceId}" class="serviceId"></td>
                <td th:text="${item.service.serviceName}"></td>
                <td th:text="${item.subprice}"></td>
                <td th:text="${item.service.servicePrice}"></td>

            </tr>
            </tbody>
        </table>
        <div class="clearfix" style="margin-top:20px;">
            <input type="submit" value="添加/修改服务" class="btn line_btn">
        </div>
        <!--订单备注-->
        <div class="user_top order_top">订单备注：</div>
        <textarea class="order_note" th:value="${saleOrder.remark}" id="remark"></textarea>
    </div>
    <div class="norder_box user_have">
        <h2>
            <span></span>添加/修改服务
        </h2>
        <div class="main_box">
            <div class="cont_box editpro_box">
                <form action="#" method="post" id="choose_form">
                    <ul class="addpro_box">
                        <li><label>选择服务:</label></li>
                        <div th:each="tos : ${Tos}">
                            <li><label th:text="${tos.tosName}"/>
                                <div class="f_left choose_span choose_radio" th:id="${tos.tosId}">
                        <span th:each="ctos:${tos.children}" th:id="${ctos.serviceId}"
                              th:text="${ctos.serviceName}">

                        </span>
                                </div>
                            </li>
                        </div>
                    </ul>

                </form>
                <div class="clearfix">
                    <input type="button" value="确认选择" id="confirm" class="btn blue_btn"/>&nbsp;&nbsp;
                    <input type="button" value="取消" id="reset" class="btn btn_dsure"/>
                </div>
            </div>
        </div>

        <!--开单所选服务-->
        <div class="spend_info">
            <div class="total">
                本次共计<em class="totalpic"></em>,
                会员卡优惠后<em class="totalupic"></em>

            </div>
        </div>
    </div>
    <div class="clearfix" style="margin-top:20px;">
        <input type="submit" value="确认保存" class="btn blue_btn total_btn">
    </div>

</div>

</body>
<!--javascript include-->
<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/other.js}"></script>
<script>
    //表单默认无法提交
    var flag = false;
    $(function () {
        $(".choose_radio span").click(function () {
            if ($(this).hasClass("curr")) {
                $(this).removeClass("curr");
            } else {
                $(this).addClass("curr").siblings().removeClass("curr");
            }
            //如果已经确认选择然后又改了，则需要重新确认选择
            console.log(flag);
            if(flag == true)
                flag=false;
            $(this).parent().next().val($(this).parent().find(".curr").text());
        });
        function  autoSelect() {
            $(".serviceId").each(function (i) {
                var  a = $(this).text();
                $(".choose_radio span").each(function (i) {
                    var b = $(this).attr("id");
                    if(a == b ){
                        $(this).addClass('curr');
                    }

                });

            })
        };
        autoSelect();
        tableShow();
        $(".del_btn").click(function () {
            if ($(this).parents("tbody").find("tr").length <= 1) {
                $(this).parents(".table").prev().remove();
                $(this).parents(".table").remove();
            } else {
                $(this).parents("tr").remove();
            }
        });
        $("#reset").click(function () {
            $(".choose_radio span").each(function (i) {
                    $(this).removeClass('curr');
            });
            autoSelect();
        });

        //根据理发师姓名选择理发师
        barberName();
        function barberName() {
            $.ajax({
                type: "post",
                url: "/order/selectBname",
                dataType: "json",
                success: function (res) {
                    if (null != res) {
                        var html = '<option value="">请选择</option>';
                        Object.keys(res).forEach(function (key) {
                            html += '<option value="' + res[key].uid + '" class="choice">' + res[key].name + '</option>';
                        });
                        $('#barber').html(html);
                    }
                }
            });
        }
        $(".line_btn").click(function () {
            $('.norder_box').removeClass('user_have');

        });

        //确认选择
        $("#confirm").click(function () {
            var servicesIds = new Array();
            var vipId, receivable, total, barberId, bname2, remark,saleorderno,orderId;
            vipId = $("#vipId").text();
            orderId=$("#orderId").val();
            console.log(vipId);
            remark = $("#remark").val();
            barberId = $("#barber option:selected").val();
            if (barberId == '' && barberId == 0) {
                $.modal.alertError("你还未选择理发师，请先选择后再提交");
                return;
            }
            $(".choose_radio span").each(function (i) {
                if ($(this).hasClass('curr')) {
                    var a = $(this).attr("id");
                    servicesIds.push(a);
                }
            });
            if (servicesIds.length == 0) {
                $.modal.alertError("你还未选择服务，请先选择后再提交");
                return;
            }
            $.ajax({
                type: "post",
                url: "/saleOrderItem/calculatePrice",
                traditional: true,
                async: true,
                data: {"servicesIds": servicesIds, "vipId": vipId},
                success: function (data) {
                    $(".total").find(".totalpic").text(data[0] + "元");
                    $(".total").find(".totalupic").text(data[1] + "元");
                    total = parseFloat($(".totalupic").text());
                    receivable = parseFloat($(".totalpic").text());
                    bname2 = $("#barber option:selected").text();
                    saleorderno = $("#saleorderno").text();
                    var html = '';
                    html += '<input type="hidden" name="orderId" value="'+orderId+'"> ';
                    html += '<div class="addpro_box clearfix"><label>会员卡号：</label><input name="vipId" value="' + vipId + '" type="hidden" readonly="readonly"/></div>';
                    // html += '<input type="hidden" name="barberId" value="' + barberId + '"readonly="readonly"/>';
                    html += '<input type="hidden" name="total" value="' + total + '"readonly="readonly"/>';
                    html += '<input type="hidden" name="receivable" value="' + receivable + '"readonly="readonly"/>';
                    html += '<input type="hidden" name="remark" value="' + remark + '" readonly="readonly"/>';
                    html += '<input type="hidden" name="saleorderno" value="' + saleorderno + '" readonly="readonly"/>';
                    for (var i = 0; i < servicesIds.length; i++)
                        html += '<input type="hidden" name="serviceId" value="' + servicesIds[i] + '"readonly="readonly"/>';
                    $("#orderItem-edit").html(html);
                    $(".spend_info").show();
                    //将表单设置为可提交。
                    flag = true;
                }
            })
        });
        //最终结算
        $(".total_btn").click(function () {

            if (flag) {
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/saleOrderItem/edit",//url
                    data: $('#orderItem-edit').serialize(),
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                        $.modal.disable();
                    },
                    success: function (result) {
                        $.modal.closeLoading();

                        layer.confirm("修改成功", {
                            icon: 1,
                            title: "系统提示",
                            btn: ['确认'],
                            btnclass: ['btn btn-primary'],
                        }, function () {
                            location.reload(true);

                        });

                    },
                    error: function (error) {
                        $.modal.closeLoading();
                        $.modal.alertError("修改失败，请重试！");

                    }
                });
            }
            else
                $.modal.alertWarning("信息已修改或未确认选择，请确认选择！");
        });
    });



    function tableShow() {
        $(".table").each(function () {
            if ($(this).find("tbody tr").length <= 0) {
                $(this).prev().remove();
                $(this).remove();
            }
        });
    }
</script>
</body>
</html>